<template>
    <div id="subPage">
        <div class="left">
            <div class="item left_one">
                <div class="left_one_top">
                    <div class="left_one_top_icon">
                        <img src="../../assets/images/ags/safety/rank.png" />
                    </div>
                    <div class="left_one_top_title">本月安全隐患排名</div>
                </div>
                <div class="left_one_bottom">
                    <vue-seamless-scroll :data="rankList" :class-option="rankOption" style="width: 100%;overflow:hidden;height: 75%">
                        <div class="left_one_item" v-for="(item, index) in rankList" :key="index" :style="[{ backgroundImage: 'url(' + item.icon + ')' }]">
                            <div class="left_one_first">
                                <div class="left_one_first_rank">NO.{{ index + 1 }}</div>
                                <div class="left_one_first_type">{{ item.issueTypeName }}</div>
                            </div>
                            <div class="left_one_first_count">{{ item.num }}项</div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/safety/investigate.png" />
                    </div>
                    <div class="left_two_top_title">隐患排查动态</div>
                </div>
                <div class="left_two_bottom">
                    <vue-seamless-scroll ref="seamlessScroll" :data="changeList" :class-option="defaultOption" style="overflow:hidden;height:90%">
                        <div class="left_two_item" v-for="(item, index) in changeList" :key="index">
                            <div class="icon">
                                <img :src="item.imgUrl || defaultUrl" alt="" />
                            </div>
                            <div class="introduction">
                                <div class="introduction_item">
                                    <div class="top">
                                        <span>{{ item.opDesc }}</span>
                                    </div>
                                    <div class="bottom">
                                        <span>{{ item.opTime }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="top">
                <div class="img">
                    <div class="cool-list cool-list-left">
                        <div class="cool-item " v-for="(item, index) in summaryLeftList" :key="index">
                            <div class="num">{{ item.num}}</div>
                            <div class="text">{{ item.issueTypeName }}</div>
                        </div>
                    </div>
                    <div class="cool-list cool-list-right">
                        <div class="cool-item" v-for="(item, index) in summaryRightList" :key="index">
                            <div class="num">{{ item.num}}</div>
                            <div class="text">{{ item.issueTypeName }}</div>
                        </div>
                    </div>
                    <div class="cool-bc"></div>
                    <div class="cool-bc2"></div>
                    <div class="cool-bc4"></div>
                    <div class="cool-bc3">
                        <div class="num">{{ totalCount }}</div>
                        <div class="sub">累计问题</div>
                        <div class="name">安全隐患汇总</div>
                    </div>
                    <div class="page-list" v-if="pages > 1">
                        <div class="page-item" @click="setPageNum(1)">
                            <img src="../../assets/images/ags/safety/safety-left-icon.png" />
                        </div>
                        <div class="page-item" @click="setPageNum(2)">
                            <img src="../../assets/images/ags/safety/safety-right-icon.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_top">
                    <div class="bottom_top_icon">
                        <img src="../../assets/images/ags/equip/status.png" />
                    </div>
                    <div class="bottom_top_title">近期上报问题信息</div>
                </div>
                <div class="bottom_table">
                    <div class="t-header">
                        <div class="td">检查时间</div>
                        <div class="td">检查人</div>
                        <div class="td">检查部位</div>
                        <div class="td">问题明细</div>
                        <div class="td">问题状态</div>
                    </div>
                    <div class="t-body">
                        <vue-seamless-scroll ref="seamlessScroll" :data="checkList" :class-option="rankOption" style="width: 100%;overflow:hidden;height: 90%">
                            <div class="tr" v-for="item in checkList" :key="item.id">
                                <div class="td">{{item.checkTime.substring(5, item.checkTime.length)}}</div>
                                <div class="td">{{ item.checkUserName }}</div>
                                <div class="td">{{ item.partName }}</div>
                                <div class="td">{{ item.issueContent }}</div>
                                <div class="td" v-if="item.state === 100" style="color:#4EBF94">已完成</div>
                                <div class="td" v-if="item.state === 30" style="color:#CFA371">待核验</div>
                                <div class="td" v-if="item.state === 20" style="color:#02B6C5">待复查</div>
                                <div class="td" v-if="item.state === 10 || item.state === 11 || item.state === 12" style="color:#D17272">待整改</div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item right_one">
                <div class="right_one_top">
                    <div class="right_one_top_icon">
                        <img src="../../assets/images/ags/safety/region.png" />
                    </div>
                    <div class="right_one_top_title">本月上报问题部位分析</div>
                </div>
                <div class="right_one_bottom" v-if="partSliderList.length > 0">
                    <vue-seamless-scroll ref="seamlessScroll" :data="partSliderList" :class-option="partOption" style="overflow:hidden;height:80%">
                        <div class="right_one_item" v-for="(item, index) in partSliderList" :key="index">
                            <div class="right_one_item_left">{{ item.partName }}</div>
                            <div class="right_one_item_center">
                                <Slider v-model="item.num" style="margin-top: -10px;"></Slider>
                            </div>
                            <div class="right_one_item_right">{{ item.num }}次</div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="item right_two">
                <div class="right_two_top">
                    <div class="right_two_top_icon">
                        <img src="../../assets/images/ags/safety/safe.png" />
                    </div>
                    <div class="right_two_top_title">安全检查</div>
                </div>
                <div class="right_two_center">
                    <div class="right_two_center_item">
                        <div class="text-item item1">
                            <div class="num1">{{ newIssueNum }}</div>
                            <div class="text">今日新增问题(项)</div>
                        </div>
                        <div class="text-item item2">
                            <div class="num2">{{ todoIssueNum }}</div>
                            <div class="text">今日待整改问题(项)</div>
                        </div>
                        <div class="text-item item3">
                            <div class="num3">{{ rectificationRate }}%</div>
                            <div class="text">累计整改完成率</div>
                        </div>
                    </div>
                </div>
                <div class="right_two_bottom">
                    <div class="text">近七天质量检查情况</div>
                    <div id="safety-check"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { initColors } from "@/mixins/colorObj";
import {
    getBoardSafetyCheckAnalysis,
    getBoardSafetyCheckList,
    getBoardSafetyCheckLog,
    getBoardSafetyCheckPartStatistics,
    getBoardSafetyCheckTypeStatistics
} from "@/api/md-board";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
    addMonths,
    FMT_DATE_TIME,
    format,
    getMonthBeginStr
} from "@/sever/dateutil";
export default {
    name: "index",
    components: {
        vueSeamlessScroll
    },
    mixins: [initColors],
    data() {
        return {
            problemCount: 0,
            defaultUrl: require("../../assets/images/ags/quality/quality-default.png"),
            //组织机构Id
            deptId: "",
            classOption: {
                step: 0.5
            },
            //质量检查DOM
            checkDom: null,
            //安全教育人次DOM
            partDom: null,
            // 左侧隐患汇总
            summaryLeftList: [],
            // 右侧隐患汇总
            summaryRightList: [],
            //排名数据列表
            rankList: [],
            //动态数据列表
            changeList: [],
            //时间
            dateArr: [addMonths(new Date(), -1), new Date()],
            //近期上报问题信息
            checkList: [],
            //今日新增问题数
            newIssueNum: 0,
            //今日待整改问题数
            todoIssueNum: 0,
            //累计整改完成率
            rectificationRate: 0,
            //分页数据
            pageNum: 1,
            pageSize: 8,
            totalCount: 0,
            pages: 0,
            //节流阀
            throttleFlag: true,
            partSliderList: []
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
        defaultOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        rankOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        partOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
            }
        }
    },
    methods: {
        rankFormat(list) {
            if (list.length > 0) {
                if (list.length > 3) {
                    let sliceList = list.slice(0, 3);
                    let spliceList = list.splice(3);
                    sliceList[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    sliceList[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    sliceList[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    spliceList.forEach(item => {
                        item["icon"] = require("../../assets/images/ags/index/left_fourth.png");
                    });
                    let mergeList = [...sliceList, ...spliceList];
                    return mergeList;
                }
                if (list.length == 1) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    return list;
                }
                if (list.length == 2) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    return list;
                }
                if (list.length == 3) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    list[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    return list;
                }
            }
        },
        saftyCheckCharts(
            data,
            newIssueNumArr,
            todoIssueNumArr,
            completeIssueNumArr
        ) {
            let chartDom = document.getElementById("safety-check");
            let myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                color: [
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "rgba(72,157,243,0.4)" },
                            { offset: 1, color: "rgba(72,157,243,0)" }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "rgba(21,192,132,0.4)" },
                            { offset: 1, color: "rgba(21,192,132,0)" }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "#F8C44F" },
                            { offset: 1, color: "#F8C44F" }
                        ]
                    }
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    data: [
                        {
                            name: "新增",
                            icon: "rect",
                            itemStyle: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(107, 201, 255,0.2)"
                                        },
                                        {
                                            offset: 0.1,
                                            color: "rgba(107, 201, 255,1)"
                                        },
                                        {
                                            offset: 0.2,
                                            color: "rgba(72, 157, 243, 0.38)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(72, 157, 243, 0)"
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        {
                            name: "完成整改",
                            icon: "rect",
                            itemStyle: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(21, 192, 132,0.2)"
                                        },
                                        {
                                            offset: 0.1,
                                            color: "rgba(21, 192, 132,1)"
                                        },
                                        {
                                            offset: 0.2,
                                            color: "rgba(21, 192, 132, 0.36)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(21, 192, 132, 0)"
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        {
                            name: "待整改"
                        }
                    ],
                    textStyle: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    left: "right",
                    itemWidth: 15,
                    itemheight: 10
                },
                grid: {
                    left: "3%",
                    right: "3%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: data,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            fontSize: "0.12rem",
                            color: "#C6E9FC"
                        }
                    }
                ],
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: false //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: "新增",
                        type: "bar",
                        stack: "Search Engine",
                        barWidth: 20, //柱图宽度
                        emphasis: {
                            focus: "series"
                        },
                        data: newIssueNumArr,
                        markPoint: {
                            symbolSize: [20, 3],
                            symbol: "rect",
                            label: {
                                show: false
                            },
                            itemStyle: {
                                normal: {
                                    color: "rgba(72, 157, 243, 1)"
                                }
                            },
                            data: (function() {
                                const markData = [];
                                let len = data.length;
                                while (len--) {
                                    if (newIssueNumArr[len] != 0) {
                                        markData.push({
                                            xAxis: data[len],
                                            yAxis: newIssueNumArr[len],
                                            name: "",
                                            value: ""
                                        });
                                    }
                                }
                                return markData;
                            })()
                        }
                    },
                    {
                        name: "完成整改",
                        type: "bar",
                        stack: "Search Engine",
                        barWidth: 20, //柱图宽度
                        emphasis: {
                            focus: "series"
                        },
                        data: completeIssueNumArr,
                        markPoint: {
                            symbolSize: [20, 3],
                            symbol: "rect",
                            label: {
                                show: false
                            },
                            itemStyle: {
                                normal: {
                                    color: "rgba(21, 192, 132, 1)"
                                }
                            },
                            data: (function() {
                                const markData2 = [];
                                let len = data.length;
                                while (len--) {
                                    if (completeIssueNumArr[len] != 0) {
                                        markData2.push({
                                            xAxis: data[len],
                                            yAxis: completeIssueNumArr[len] + newIssueNumArr[len],
                                            name: "",
                                            value: ""
                                        });
                                    }
                                }
                                return markData2;
                            })()
                        }
                    },
                    {
                        name: "待整改",
                        type: "line",
                        emphasis: {
                            focus: "series"
                        },
                        data: todoIssueNumArr
                    }
                ]
            };

            option && myChart.setOption(option);
            myChart.on("legendselectchanged", function(params) {
                let newOption = myChart.getOption();
                if (params.selected["新增"] == false) {
                    newOption.series[1].markPoint.data = (function() {
                        const markData2 = [];
                        let len = data.length;
                        while (len--) {
                            if (completeIssueNumArr[len] != 0) {
                                markData2.push({
                                    xAxis: data[len],
                                    yAxis: completeIssueNumArr[len],
                                    name: "",
                                    value: ""
                                });
                            }
                        }
                        return markData2;
                    })();
                    myChart.setOption(newOption);
                } else {
                    newOption.series[1].markPoint.data = (function() {
                        const markData2 = [];
                        let len = data.length;
                        while (len--) {
                            if (completeIssueNumArr[len] != 0) {
                                markData2.push({
                                    xAxis: data[len],
                                    yAxis: completeIssueNumArr[len] + newIssueNumArr[len],
                                    name: "",
                                    value: ""
                                });
                            }
                        }
                        return markData2;
                    })();
                    myChart.setOption(newOption);
                }
            });
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        //安全问题部位统计
        getBoardSafetyCheckPartStatisticsFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardSafetyCheckPartStatistics(params).then(res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    // this.partSliderList = [{partName:"塔吊零件",num:15}]
                    this.partSliderList = list;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //设置分页数
        setPageNum(type) {
            if (type === 1) {
                if (this.pageNum != 1) {
                    this.pageNum--;
                } else {
                    return;
                }
            } else {
                if (this.pageNum != this.pages) {
                    this.pageNum++;
                } else {
                    return;
                }
            }
            this.getBoardSafetyCheckTypeStatisticsPageFn();
        },
        //分页
        getBoardSafetyCheckTypeStatisticsPageFn() {
            if (!this.throttleFlag) {
                return;
            }
            this.throttleFlag = false;
            let params = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            getBoardSafetyCheckTypeStatistics(params).then(res => {
                if (res.code == 200) {
                    this.totalCount = res.data.total;
                    this.pages = res.data.pages;
                    let list = res.data.list;
                    let summaryLeftList = [];
                    let summaryRightList = [];
                    for (let i = 0; i < list.length; i++) {
                        let e = list[i];
                        if (list.length < 4) {
                            if (i < 2) {
                                summaryLeftList.push(e);
                            } else {
                                summaryRightList.push(e);
                            }
                        } else {
                            if (i < 4) {
                                summaryLeftList.push(e);
                            } else {
                                summaryRightList.push(e);
                            }
                        }
                    }
                    this.summaryLeftList = summaryLeftList;
                    this.summaryRightList = summaryRightList;
                    this.throttleFlag = true;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //本月安全隐患排名
        getRankListFn() {
            let params = {
                deptId: this.deptId,
                startTime: format(this.dateArr[0], FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardSafetyCheckTypeStatistics(params).then(res => {
                if (res.code == 200) {
                    this.rankList = res.data.list || [];
                    this.rankList = this.rankFormat(this.rankList);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //安全动态
        getBoardSafetyCheckLogFn() {
            let params = {
                deptId: this.deptId,
                pageNum: 1,
                pageSize: 100
            };
            getBoardSafetyCheckLog(params).then(res => {
                if (res.code == 200) {
                    this.changeList = res.data.list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //近期上报问题列表
        getBoardSafetyCheckListFn() {
            let params = {
                deptId: this.deptId,
                pageNum: 1,
                pageSize: 100
            };
            getBoardSafetyCheckList(params).then(res => {
                if (res.code == 200) {
                    this.checkList = res.data.list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //安全检查
        getBoardSafetyCheckAnalysisFn() {
            let params = {
                deptId: this.deptId
            };
            getBoardSafetyCheckAnalysis(params).then(res => {
                if (res.code == 200) {
                    let data = res.data;
                    this.rectificationRate = data.rectificationRate || 0;
                    this.newIssueNum = data.newIssueNum || 0;
                    this.todoIssueNum = data.todoIssueNum || 0;
                    let dateList = [];
                    let newIssueNumArr = [];
                    let todoIssueNumArr = [];
                    let completeIssueNumArr = [];
                    let list = data.list;
                    for (let i = 0; i < list.length; i++) {
                        dateList.push(list[i].dateStr);
                        newIssueNumArr.push(list[i].newIssueNum);
                        todoIssueNumArr.push(list[i].todoIssueNum);
                        completeIssueNumArr.push(list[i].completeIssueNum);
                    }
                    this.saftyCheckCharts(
                        dateList,
                        newIssueNumArr,
                        todoIssueNumArr,
                        completeIssueNumArr
                    );
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getBoardSafetyCheckTypeStatisticsPageFn();
        this.getBoardSafetyCheckPartStatisticsFn();
        this.getRankListFn();
        this.getBoardSafetyCheckLogFn();
        this.getBoardSafetyCheckAnalysisFn();
        this.getBoardSafetyCheckListFn();
    }
};
</script>

<style scoped lang="scss">
@import "../../assets/style/ags/animation.scss";
@function pxToRem($val) {
    @return $val/100 + rem;
}
@font-face {
    font-family: "led regular";
    src: url("../../assets/font/ds-digib-webfont.woff") format("woff");
}
@font-face {
    font-family: "auto_digital";
    src: url("../../assets/font/auto_digital.ttf") format("woff");
}
/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    pointer-events: auto !important;
    .left,
    .right {
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .item {
            width: 100%;
            height: pxToRem(320);
            background-image: url("../../assets/images/ags/index/left_panel.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 120%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(20);
        }
        .left_one {
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(80);
                .left_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_one_top_title {
                    width: pxToRem(220);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_one_bottom {
                display: flex;
                flex-flow: column nowrap;
                margin: pxToRem(15) 0 0 pxToRem(70);
                height: 95%;
                .left_one_item {
                    display: flex;
                    justify-content: space-between;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: pxToRem(280);
                    margin-bottom: pxToRem(10);
                    .left_one_first {
                        width: pxToRem(180);
                        display: flex;
                        justify-content: flex-start;
                        .left_one_first_rank {
                            width: pxToRem(80);
                            margin-left: pxToRem(20);
                            color: #fcfcfe;
                            font-weight: bolder;
                            font-style: oblique;
                            font-size: pxToRem(13);
                        }
                        .left_one_first_type {
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        color: #d8f0fe;
                    }
                    .left_one_first_count {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #75808a;
                    }
                }
            }
        }
        .left_two {
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(80);
                .left_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .left_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_two_bottom {
                display: flex;
                flex-flow: column;
                margin-top: pxToRem(10);
                margin-left: pxToRem(65);
                height: 95%;
                .left_two_item {
                    margin-bottom: pxToRem(10);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 90%;
                    background-image: url("../../assets/images/ags/quality/background_item.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .icon {
                        margin: pxToRem(5) 0 0 pxToRem(12);
                        img {
                            width: pxToRem(110);
                            height: pxToRem(68);
                        }
                    }
                    .introduction {
                        .introduction_item {
                            .top {
                                margin: 0 0 0 pxToRem(18);
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #a8dfff;
                            }
                            .bottom {
                                margin: pxToRem(20) 0 0 pxToRem(18);
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #c6e9fc;
                            }
                        }
                    }
                }
            }
        }
    }
    .left .item:last-of-type {
        background-image: url("../../assets/images/ags/emp/left_panel.png") !important;
        height: 62%;
        background-size: 100% 108%;
        margin-bottom: 0;
    }
    .left .item:first-of-type {
        background-image: url("../../assets/images/ags/safety/left_panel.png") !important;
        background-size: 100% 118%;
        height: 36%;
    }
    .right .item:first-of-type {
        height: 36%;
        background-image: url("../../assets/images/ags/index/right_panel.png") !important;
    }
    .right .item:last-of-type {
        height: 62%;
        background-image: url("../../assets/images/ags/quality/right_panel.png") !important;
        background-size: 100% 108%;
        margin-bottom: 0;
    }
    .center {
        width: pxToRem(950);
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        .top {
            width: 100%;
            height: 68%;
            position: relative;
            padding: pxToRem(6);
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .img {
                position: relative;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                overflow: hidden;
                .cool-list {
                    position: absolute;
                    height: 100%;
                    top: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    .cool-item {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        width: pxToRem(100);
                        height: pxToRem(100);
                        &::after {
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: block;
                            content: "";
                            width: 100%;
                            height: 100%;
                            -webkit-animation: rotate-animation 10s linear
                                infinite;
                            animation: rotate-animation 10s linear infinite;
                            background-image: url("../../assets/images/ags/safety/round_tabs.png");
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                        .num {
                            font-size: pxToRem(22);
                            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                            font-weight: bold;
                            color: #6bc9ff;
                        }
                        .text {
                            width: 70%;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #a8dfff;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .cool-list-left {
                    left: pxToRem(10);
                    animation: round-left-animation 3s ease;
                    -webkit-animation: round-left-animation 3s ease;
                    &.cool-list {
                        .cool-item {
                            &:first-of-type {
                                transform: translateX(pxToRem(50));
                            }
                            &:last-of-type {
                                transform: translateX(pxToRem(50));
                            }
                        }
                    }
                }
                .cool-list-right {
                    right: pxToRem(10);
                    animation: round-right-animation 3s ease;
                    -webkit-animation: round-right-animation 3s ease;
                    &.cool-list {
                        .cool-item {
                            &:first-of-type {
                                transform: translateX(pxToRem(-50));
                            }
                            &:last-of-type {
                                transform: translateX(pxToRem(-50));
                            }
                        }
                    }
                }
                .cool-bc {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-400);
                    margin-left: pxToRem(-400);
                    //margin-top: pxToRem(-295);
                    //margin-bottom: pxToRem(-295);
                    width: pxToRem(800);
                    height: pxToRem(800);
                    background-image: url("../../assets/images/ags/safety/cool-bc.png");
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-animation: rotate-animation 10s linear infinite;
                    animation: rotate-animation 10s linear infinite;
                    z-index: 9;
                    overflow: hidden;
                }
                .cool-bc3 {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-90);
                    margin-left: pxToRem(-90);
                    width: pxToRem(180);
                    height: pxToRem(180);
                    -webkit-animation: scale-animation 12s linear infinite;
                    animation: scale-animation 12s linear infinite;
                    z-index: 20;
                    opacity: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border-radius: 50%;

                    .name {
                        position: absolute;
                        bottom: -80%;
                        left: 50%;
                        width: pxToRem(180);
                        transform: translate(-35%, -170%);
                        font-size: pxToRem(20);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                    }
                    .num {
                        font-size: pxToRem(60);
                        font-family: "auto_digital" !important;
                        font-weight: 400;
                        color: #feffff;
                        text-indent: pxToRem(-15);
                    }
                    .sub {
                        font-size: pxToRem(20);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #feffff;
                    }
                }
                .cool-bc4 {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-90);
                    margin-left: pxToRem(-90);
                    width: pxToRem(180);
                    height: pxToRem(180);
                    background-color: rgba(1, 250, 252, 0.5);
                    border-radius: 50%;
                    z-index: 8;
                    -webkit-animation: rect-animation 5s linear infinite;
                    animation: rect-animation 5s linear infinite;
                    border-radius: 50%;
                }
                .cool-bc2 {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-200);
                    margin-left: pxToRem(-250);
                    width: pxToRem(500);
                    height: pxToRem(370);
                    background-image: url("../../assets/images/ags/safety/center_bg.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    -webkit-animation: scale-animation 12s linear infinite;
                    animation: scale-animation 12s linear infinite;
                    z-index: 7;
                    opacity: 0.7;
                }
                .page-list {
                    width: 60%;
                    position: absolute;
                    bottom: pxToRem(50);
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    z-index: 1000;
                    .page-item {
                        width: pxToRem(15);
                        height: pxToRem(15);
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .bottom {
            width: 100%;
            height: 30%;
            background-image: url("../../assets/images/ags/index/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: column nowrap;
            .bottom_top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: pxToRem(26);
                .bottom_top_icon {
                    img {
                        width: pxToRem(42);
                        height: pxToRem(15);
                    }
                }
                .bottom_top_title {
                    width: pxToRem(150);
                    height: pxToRem(22);
                    font-size: pxToRem(16);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(18);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_table {
                width: 88%;
                margin: pxToRem(-30) 0 0 pxToRem(60);
                // margin: auto;
                height: pxToRem(230);
                overflow: hidden;
                .t-header {
                    width: 100%;
                    height: pxToRem(35);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    overflow: hidden;
                    .td {
                        flex: 1;
                        text-align: center;
                        line-height: pxToRem(35);
                        margin-bottom: pxToRem(1);
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #00f0ff;
                    }
                }
                .t-body {
                    width: 100%;
                    height: calc(100% - 0.35rem);
                    overflow: hidden;
                    .tr {
                        height: pxToRem(30);
                        line-height: pxToRem(30);
                        width: 100%;
                        display: flex;
                        margin-bottom: pxToRem(1);
                        &:nth-child(2n-1) {
                            background: #0c1b2b;
                        }
                        .td {
                            flex: 1;
                            text-align: center;
                            line-height: pxToRem(30);
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #b5eeff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    .right {
        .right_one {
            display: flex;
            flex-flow: column nowrap;
            .right_one_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(55);
                .right_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_one_top_title {
                    width: pxToRem(250);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_one_bottom {
                display: flex;
                flex-flow: column;
                margin-top: pxToRem(5);
                margin-left: pxToRem(35);
                height: 95%;
                width: 80%;
                .right_one_item {
                    display: flex;
                    justify-content: space-around;
                    height: pxToRem(22);
                    margin-left: pxToRem(-10);
                    margin-top: pxToRem(5);
                    width: 100%;
                    pointer-events: none;
                    .right_one_item_left {
                        width: 30%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        text-align: left;
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                    }
                    .right_one_item_center {
                        width: 50%;
                        height: pxToRem(22);
                        margin: 0 pxToRem(-5) 0 pxToRem(-5);
                    }
                    .right_one_item_right {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #c6e9fc;
                    }
                }
            }
        }
        .right_two {
            display: flex;
            flex-flow: column nowrap;
            .right_two_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(50);
                .right_two_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_two_center {
                width: 80%;
                margin-top: pxToRem(15);
                margin-left: pxToRem(32);
                .right_two_center_item {
                    display: flex;
                    justify-content: space-around;
                    .item1 {
                        width: pxToRem(92);
                        display: flex;
                        flex-flow: column nowrap;
                        .num1 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #ecab62;
                        }
                    }
                    .item2 {
                        width: pxToRem(104);
                        display: flex;
                        flex-flow: column nowrap;
                        .num2 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #87b3ff;
                        }
                    }
                    .item3 {
                        width: pxToRem(85);
                        display: flex;
                        flex-flow: column nowrap;
                        .num3 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #5db2e4;
                        }
                    }

                    .text {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Light, Microsoft YaHei;
                        font-weight: 300;
                        color: #d8f0fe;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            .right_two_bottom {
                width: 80%;
                height: 80%;
                margin: pxToRem(10) 0 0 pxToRem(30);
                #safety-check {
                    width: 100%;
                    height: 90%;
                }
                .text {
                    text-indent: pxToRem(10);
                    height: pxToRem(30);
                    margin-top: pxToRem(10);
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #819fb3;
                }
            }
        }
    }
}
/deep/ .ivu-slider-wrap {
    height: pxToRem(7);
    border: pxToRem(1) solid;
    border-radius: 0;
    background: linear-gradient(270deg, #111111 0%, rgba(23, 63, 87, 0) 100%);
}
/deep/ .ivu-slider-bar {
    height: pxToRem(6);
    position: absolute;
    border-radius: 0;
    // background: #007991;
    background: linear-gradient(
        270deg,
        #3fd9ce 0%,
        rgba(83, 140, 238, 0.2) 100%
    );
}
/deep/ .ivu-slider-button {
    width: pxToRem(2);
    height: pxToRem(10);
    border: none;
    border-radius: 0;
    background-color: #fff;
    outline: 0;
    margin-top: -11px;
}
</style>
